<div class="layui-row layui-col-space15 zbytj">
	<div class="layui-col-xs4 layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">
				注册用户
			</div>
			<div class="layui-card-body">
				<p class="lay-big-font" id="zczr"></p>
			</div>
		</div>
	</div>
	<div class="layui-col-xs4 layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">
				今日线上用户增长
			</div>
			<div class="layui-card-body">
				<p class="lay-big-font" id="dayzz"></p>
			</div>
		</div>
	</div>
	<div class="layui-col-xs4 layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">
				今日企业用户增长
			</div>
			<div class="layui-card-body">
				<p class="lay-big-font" id="dayqy"></p>
			</div>
		</div>
	</div>
</div>
<div class="layui-row layui-col-space15">
	<div class="layui-col-xs12 layui-col-sm12  layui-col-md12">
		<div class="layui-card">
			<div class="layui-card-header">
				用户分布<button class="layui-btn layui-btn-sm" style="float: right;margin-top: 6px;" id="qhdt">切换地图</button>
			</div>
			<div class="layui-card-body" style="clear: both;">
				<div class="zg">
					<div id="st_maps" style="width: 100%;height: 478px;"></div>
				</div>
				<div class="sj" >
					<div id="sjdt" style="width: 100%;height: 478px;"></div>
				</div>

			</div>
		</div>
	</div>
</div>

<div class="layui-row layui-col-space15">
	<div class="layui-col-xs12 layui-col-sm12  layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">
				每日注册统计
			</div>
			<div class="layui-card-body">
				<div id="regContr" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-xs12 layui-col-sm12  layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">
				每月注册统计
			</div>
			<div class="layui-card-body">
				<div id="regConty" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-xs12 layui-col-sm12  layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">
				每月注册趋势
			</div>
			<div class="layui-card-body">
				<div id="yzcqs" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
</div>

<div class="layui-row layui-col-space15">
	<div class="layui-col-xs9 layui-col-sm9  layui-col-md9">
		<div class="layui-card">
			<div class="layui-card-header">
				年龄分布统计
			</div>
			<div class="layui-card-body">
				<div id="agefb" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-xs3 layui-col-sm3  layui-col-md3">
		<div class="layui-card">
			<div class="layui-card-header">
				性别统计
			</div>
			<div class="layui-card-body">
				<div id="sexfb" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
</div>

<div class="layui-row layui-col-space15">
	<div class="layui-col-xs6 layui-col-sm6  layui-col-md3">
		<div class="layui-card">
			<div class="layui-card-header">
				昨日活跃用户统计
			</div>
			<div class="layui-card-body">
				<div id="user_ri" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-xs6 layui-col-sm6  layui-col-md9">
		<div class="layui-card">
			<div class="layui-card-header">
				每日活跃趋势
			</div>
			<div class="layui-card-body">
				<div id="rhyqs" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
</div>

<div class="layui-row layui-col-space15">
	<div class="layui-col-xs6 layui-col-sm6  layui-col-md3">
		<div class="layui-card">
			<div class="layui-card-header">
				月活跃用户统计
			</div>
			<div class="layui-card-body">
				<div id="user_yue" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-xs6 layui-col-sm6  layui-col-md9">
		<div class="layui-card">
			<div class="layui-card-header">
				用户测试数据统计
			</div>
			<div class="layui-card-body">
				<div id="user_tj" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
</div>

<!--<div class="layui-row layui-col-space15">
	<div class="layui-col-xs12 layui-col-sm12  layui-col-md6">
		<div class="layui-card">
			<div class="layui-card-header">
				用户测试数据统计
			</div>
			<div class="layui-card-body">
				<div id="user_tj" style="width: 100%;height: 300px;"></div>
			</div>
		</div>
	</div>
</div>-->

<script>
	var now = new Date();
	var year = now.getFullYear();
	var month = (now.getMonth() + 1);
	var day = now.getDate();
	var time = year + "-" + month + "-" + day;

	var last16 = dayList(time).last16; //日期
	var dataTemp = dayList(time).ecShow; //echart日期
	var uesTemp = dayList(time).ecUse; //echart日期下标

	var yfa = []
	var yfn = []
	for(var i = 1; i <= 12; i++) {
		++month;

		if(month == 12) {
			month = month + ""
			yfn.push(month + "月")
			if(month.length == 1) {
				month = "0" + month
			}
			yfa.push(month)
			month = 0
		} else {
			month = month + ""
			yfn.push(month + "月")
			if(month.length == 1) {
				month = "0" + month
			}
			yfa.push(month)
		}

	}
	var mapUser = "";
	var worldmap = "";
	var userMap = [];

	var userRzc = [];
	var userZcy = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
	var userzf = [];
	var usersm = [];
	var useryd = [];
	var userList = [];
	var man, wman, count;

	var tjListdata = JSON.parse(localStorage.getItem("login_info"));
	var o;
	if(tjListdata.orgId == 1) {
		o = "";
	} else {
		$('.zbytj').css("display", "none")
		o = tjListdata.orgId + "";
	}

	loadUsertj()
	loadUserZcR()
	loadUserZcY()
	loadTestTj()
	loadDeivce()
	loadAge()
	userSexZs()
	var z = 1 //中国

	$("#qhdt").click(function() {
		if(z == 1) {
			z = 0
			$('.sj').show()
			$('.zg').hide()
			loadUsertj()
		} else {
			z = 1
			$('.zg').show()
			$('.sj').hide()
			loadUsertj()
		}
	})

	//地图数据
	function loadUsertj() {
		$.ajax({
			type: "POST",
			url: maps,
			data: {
				params: JSON.stringify({
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				mapUser += '{';

				for(var i = 0; i < data.length; i++) {
					var city = data[i].city;
					var lo = data[i].location;
					if(lo.substring(0, 1) != '[') {
						lo = "[" + lo + "]"
					}
					lo = lo.split(',');
					mapUser += '"' + city + '":' + lo + ',';
					if(i == data.length - 1) {
						mapUser = mapUser.substring(0, mapUser.length - 1);
						mapUser += "}"
					}
					var cityName = data[i].city;
					var count = data[i].sums;

					userMap.push({
						name: cityName,
						value: count
					})
				}
				mapUser = JSON.parse(mapUser)
				var sz = [];

				for(var i = 0; i < data.length; i++) {
					var lo = data[i].location;
					lo = lo.replace(']', "," + data[i].sums + "]")
					lo = lo.replace(']', '')
					lo = lo.replace('[', '')
					lo = lo.split(",")
					var cityName = data[i].city;
					sz.push({
						name: cityName,
						value: lo
					})
				}
				userTje(userMap, mapUser);
				userSjdt(sz)
				$('.sj').hide()
			},
			complete: function() {

			},
			error: function(result) {
				console.log(result);
				location.replace('login.html');
			},
		});

	}

	//每日注册
	function loadUserZcR() {
		// 每日注册用户数量

		var d;
		if(tjListdata.orgId == 1) {
			d = {
				pageSize: 30,
				pageNumber: 1,
				orgId: "",
				a: '"%Y-%m-%d"'
			}
		} else {
			d = {
				pageSize: 30,
				pageNumber: 1,
				orgId: o,
				a: '"%Y-%m-%d"'
			}
		}

		$.ajax({
			type: "POST",
			url: userDays,
			data: {
				params: JSON.stringify(d)
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var data_arr = data;
				userRzc = [];
				$.each(last16, function(key, val) { //日期数据比对，生成echart需要数据
					$.each(data_arr, function(k, v) {
						var addt = v.addTime.split(" ")[0];
						if(val == addt) {
							userRzc[key] = v.sums;
						}
					});
				});
				userZcr(dataTemp, userRzc);

				var b = data[0];
				var curTime = new Date().getFullYear() + "-" + showDate(new Date().getMonth() + 1) + "-" + new Date().getDate();
				if(b.addTime.substring(0, 10) == curTime) {

					loadUserQy(userRzc[userRzc.length - 1]);
				} else {
					loadUserQy(0);
				}
			},
			complete: function() {
				$('#dayzz').html(userRzc[userRzc.length - 1]);
			},
			error: function(result) {},
		});
	}

	function loadUserQy(x) {
		// 每日注册用户数量
		$.ajax({
			type: "POST",
			url: userDays,
			data: {
				params: JSON.stringify({
					pageSize: 30,
					pageNumber: 1,
					a: '"%Y-%m-%d"',
					orgId: 1 + ""
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var b = data[0];
				var curTime = new Date().getFullYear() + "-" + showDate(new Date().getMonth() + 1) + "-" + new Date().getDate();
				if(b.addTime.substring(0, 10) == curTime) {
					loadUserQa(x, b.sums);
				} else {
					loadUserQa(x, 0);
				}

			},
			complete: function() {

			},
			error: function(result) {},
		});

	}

	function loadUserQa(x, y) {

		// 每日注册用户数量
		$.ajax({
			type: "POST",
			url: userDays,
			data: {
				params: JSON.stringify({
					pageSize: 30,
					pageNumber: 1,
					a: '"%Y-%m-%d"',
					orgId: 0 + ""
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				if(data.length > 0) {
					var b = data[0];
					var curTime = new Date().getFullYear() + "-" + showDate(new Date().getMonth() + 1) + "-" + new Date().getDate();
					var day = 0;
					if(b.addTime.substring(0, 10) == curTime) {
						day = b.sums;
					}
					if(x - y - day <= 0) {
						$('#dayqy').html(0);
					} else {
						$('#dayqy').html(x - y - day);
					}
				} else {}
				$('#dayqy').html(0);
			},
			complete: function() {},
			error: function(result) {},
		});

	}

	function showDate(a) {
		if(a <= 9) {
			a = "0" + a
		}
		return a
	}

	//每月注册数据
	function loadUserZcY() {
		// 每月注册用户数量
		$.ajax({
			type: "POST",
			url: userDays,
			data: {
				params: JSON.stringify({
					pageSize: 30,
					pageNumber: 1,
					orgId: o,
					a: '"%Y-%m"'
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var csl = [];
				var data_arr = data;
				$.each(yfa, function(key, val) { //日期数据比对，生成echart需要数据
					$.each(data_arr, function(k, v) {
						var addt = v.addTime.substring(5, 7);
						if(val == addt) {
							csl[key] = v.sums;
						}
					});
				});

				userZcys(csl);
				var a = csl;
				var b = [];
				for(var i = 0; i < a.length; i++) {
					var m = 0;
					for(var j = i; j >= 0; j--) {
						if(a[j]) {
							m += a[j];
						} else {
							m += 0;
						}
					}
					b[i] = m;
				}
				useryqs(b)
			},
			complete: function() {},
			error: function(result) {},
		});
	}

	//日活跃趋势
	loadmontQu();

	function loadmontQu() {
		$.ajax({
			type: "POST",
			url: manthUser,
			data: {
				params: JSON.stringify({
					pageSize: 31,
					pageNumber: 1,
					orgId: tjListdata.orgId + ""
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var data_arr = data;
				rhyqs = [];
				$.each(last16, function(key, val) { //日期数据比对，生成echart需要数据
					$.each(data_arr, function(k, v) {
						var addt = v.addTime.split(" ")[0];
						if(val == addt) {
							rhyqs[key] = v.uploadNum;
						}
					});
				});
				userrqs(rhyqs)
			},
			complete: function() {},
			error: function(result) {
				console.log(result);
			},
		});
	}

	function loadTestTj() {
		// 一键测试数据
		$.ajax({
			type: "POST",
			url: countTotalViscera,
			data: {
				params: JSON.stringify({
					pageSize: 31,
					pageNumber: 1,
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var data_arr = data;
				userzf = [];
				$.each(last16, function(key, val) { //日期数据比对，生成echart需要数据
					$.each(data_arr, function(k, v) {
						var addt = v.addTime.split(" ")[0];
						if(val == addt) {
							userzf[key] = v.sums;
						}
					});
				});
				loadSport(userzf)
			},
			complete: function() {},
			error: function(result) {
				console.log(result);
			},
		});
	}

	function loadSport(uzf) {
		// 性别
		$.ajax({
			type: "POST",
			url: countTotalSport,
			data: {
				params: JSON.stringify({
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var data_arr = data;
				useryd = [];
				$.each(last16, function(key, val) { //日期数据比对，生成echart需要数据
					$.each(data_arr, function(k, v) {
						var addt = v.addTime.split(" ")[0];
						if(val == addt) {
							useryd[key] = v.sums;
						}
					});
				});
				loadSleep(uzf, useryd)
			},
			error: function(result) {
				console.log(result);
			},
		});
	}

	function loadSleep(uzfs, uyds) {
		// 性别
		$.ajax({
			type: "POST",
			url: countTotalSleep,
			data: {
				params: JSON.stringify({
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				var data_arr = data;
				usersm = [];

				$.each(last16, function(key, val) { //日期数据比对，生成echart需要数据
					$.each(data_arr, function(k, v) {
						var addt = v.addTime.split(" ")[0];
						if(val == addt) {
							usersm[key] = v.sums;
						}
					});
				});
				userct(uzfs, usersm, uyds)
			},
			error: function(result) {
				console.log(result);
			},
		});
	}

	//日活月活
	function loadDeivce() {

		// 日货
		$.ajax({
			type: "POST",
			url: countTotalDevice,
			data: {
				params: JSON.stringify({
					orgId: tjListdata.orgId + ""
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				userDay(data[0].uploadNum / data[0].liveness, data[0].uploadNum);
				userMon(data[0].sumUpload / data[0].sumLiveness, data[0].sumUpload);
			},
			complete: function() {},
			error: function(result) {
				console.log(result);
			},
		});
	}

	//年龄统计
	function loadAge() {
		$.ajax({
			type: "POST",
			url: countTotalAge,
			data: {
				params: JSON.stringify({
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				for(var i = 0; i < data.length; i++) {
					userList.push(data[i].sums)
				}
				userage(userList);
			},
			complete: function() {},
			error: function(result) {
				console.log(result);
			},
		});
	}
	userc()

	function userc() {
		// 性别
		$.ajax({
			type: "POST",
			url: countSex,
			data: {
				params: JSON.stringify({
					sex: "",
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				$('#zczr').html(data[0].sums)
			},
			error: function(result) {
				console.log(result);
			},
		});
	}

	//性别统计
	function userSexZs() {
		// 性别
		$.ajax({
			type: "POST",
			url: countSex,
			data: {
				params: JSON.stringify({
					sex: "",
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				userSexNs(data[0].sums);
			},
			error: function(result) {
				console.log(result);
			},
		});
	}

	function userSexNs(zs) {
		// 性别
		$.ajax({
			type: "POST",
			url: countSex,
			data: {
				params: JSON.stringify({
					sex: "男",
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				userSexWs(zs, data[0].sums)
			},
			error: function(result) {
				console.log(result);
			},
		});
	}

	function userSexWs(z, n) {
		// 性别
		$.ajax({
			type: "POST",
			url: countSex,
			data: {
				params: JSON.stringify({
					sex: "女",
					orgId: o
				})
			},
			dataType: "json",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				usersex(n, data[0].sums, z - n - data[0].sums);
			},
			error: function(result) {
				console.log(result);
			},
		});
	}

	// 地图展示
	function userTje(md, mps) {
		var data = md;
		var geoCoordMap = mps;

		var convertData = function(data) {
			var res = [];
			for(var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name];
				if(geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value)
					});
				}
			}
			return res;
		};
		var max = 480,
			min = 9; // todo 
		var maxSize4Pin = 30,
			minSize4Pin = 10;

		option = {
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					return params.name + ' : ' + params.value[2];
				}
			},
			geo: {
				map: 'china',
				label: {
					emphasis: {
						show: false
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#ffffff',
						borderColor: '#111'
					},
					emphasis: {
						areaColor: '#61DECE'
					}
				}
			},
			series: [{
					name: 'pm2.5',
					type: 'scatter',
					coordinateSystem: 'geo',
					data: convertData(data),
					symbolSize: function(val) {
						var a = (maxSize4Pin - minSize4Pin) / (max - min);
						var b = minSize4Pin - a * min;
						b = maxSize4Pin - a * max;
						return a * val[2] + b;
					},
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: false
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#08CCA7',
							shadowColor: '#333'
						}
					},
				},
				{
					name: 'Top 5',
					type: 'effectScatter',
					coordinateSystem: 'geo',
					data: convertData(data.sort(function(a, b) {
						return b.value - a.value;
					}).slice(0, 5)),
					symbolSize: function(val) {
						var a = (maxSize4Pin - minSize4Pin) / (max - min);
						var b = minSize4Pin - a * min;
						b = maxSize4Pin - a * max;
						return a * val[2] + b;
					},
					showEffectOn: 'render',
					rippleEffect: {
						brushType: 'stroke'
					},
					hoverAnimation: true,
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#08CCA7',
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					zlevel: 1
				}

			]
		};
		var mapChart = echarts.init(document.getElementById("st_maps"));
		mapChart.setOption(option, true);
		mapChart.on('click', function(params) {
			layui.use(['config', 'admin', 'index'], function() {
				var admin = layui.admin;
				var index = layui.index;
				$.ajax({
					type: "POST",
					url: userListPath,
					data: {
						params: JSON.stringify({
							sortOrder: "u.user_id asc",
							sortOrder1: "",
							orgId: o,
							pageSize: 1000,
							pageNumber: 1,
							city: params.data.name
						})
					},
					dataType: "json",
					xhrFields: {
						withCredentials: true
					},
					beforeSend: function(request) {},
					success: function(datas) {
						admin.putTempData(params.dataIndex + "u", datas.rows); // 用缓存传递参数
						// 不分离版本用后台地址
						index.openNewTab({
							title: params.data.name,
							url: 'components/system/mapuserz.html',
							menuId: params.dataIndex + "u"
						});
					},
					beforeSend: function() {},
					complete: function() {},

					error: function(result) {
						console.log(result);
					},
				});
			})
		});
	}

	//日注册
	function userZcr(datax, datasj) {
		var dataAxis = datax;
		var data2 = datasj;
		option2 = {
			grid: {
				y: 20,
				x2: 5,
				y2: 30,
				x: 36
			},
			tooltip: {
				trigger: 'item'
			},
			xAxis: {
				data: dataAxis,
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				z: 10,
				axisLabel: {
					interval: 2,
					textStyle: {
						fontSize: 9,
					}
				},
			},
			yAxis: {
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					splitNumber: 1,
					textStyle: {
						fontSize: 10,
					}
				},
			},
			dataZoom: [{
				type: 'inside'
			}],
			series: [{ // For shadow
				type: 'bar',
				barWidth: 3,
				itemStyle: {
					normal: {
						color: 'rgba(0,0,0,0)'
					}
				},
				barGap: '-100%',
				barCategoryGap: '40%',
				animation: false
			}, {
				type: 'bar',
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1, [{
								offset: 0,
								color: '#3DC7BE'
							}, {
								offset: 1,
								color: '#2471A3'
							}]
						),
						barBorderRadius: 30,
					},
					emphasis: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1, [{
								offset: 0,
								color: '#2378f7'
							}, {
								offset: 0.7,
								color: '#2378f7'
							}, {
								offset: 1,
								color: '#83bff6'
							}]
						)
					},
				},
				data: data2
			}],
			label: {
				normal: {
					show: true,
					position: 'top',
					formatter: '{c}'
				}
			},
		};

		echarts.init(document.getElementById("regContr")).setOption(option2, true);
	}

	//注册月e
	function userZcys(userZcys) {
		var XData = yfn;
		var yData = userZcys;
		option1 = {
			//		backgroundColor: "#080f15",
			grid: {
				y: 20,
				x2: 5,
				y2: 25,
				x: 30
			},
			xAxis: {
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				splitArea: {
					show: false
				},

				data: XData,
				axisLabel: {
					formatter: function(value) {
						var ret = ""; //拼接加\n返回的类目项
						var maxLength = 3; //每项显示文字个数
						var valLength = value.length; //X轴类目项的文字个数
						var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
						if(rowN > 1) //如果类目项的文字大于3,
						{
							for(var i = 0; i < rowN; i++) {
								var temp = ""; //每次截取的字符串
								var start = i * maxLength; //开始截取的位置
								var end = start + maxLength; //结束截取的位置
								//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
								temp = value.substring(start, end) + "\n";
								ret += temp; //凭借最终的字符串
							}
							return ret;
						} else {
							return value;
						}
					},
					interval: 0,
					fontSize: 10,
					fontWeight: 100,
					textStyle: {
						color: '#9faeb5',

					}
				},
				axisLine: {
					lineStyle: {
						color: '#4d4d4d'
					}
				}
			},
			yAxis: {
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				splitArea: {
					show: false
				},

				axisLabel: {
					textStyle: {
						color: '#9faeb5',
						fontSize: 10,
					}
				},
				axisLine: {
					lineStyle: {
						color: '#4d4d4d'
					}
				}
			},
			"tooltip": {
				"trigger": "item",
				"textStyle": {
					"fontSize": 12
				},
				"formatter": "{b0}:{c0}人"
			},
			series: {
				type: "bar",
				itemStyle: {
					normal: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: '#00d386' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#0076fc' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						barBorderRadius: 15,
					}
				},
				barWidth: 5,
				data: yData
			}
		};
		echarts.init(document.getElementById("regConty")).setOption(option1, true);
	}

	//日活
	function userDay(rhs, rc) {
		option = {
			series: [{
					name: '刻度',
					type: 'gauge',
					radius: '80%',
					min: 0,
					max: 100,
					splitNumber: 10, //刻度数量
					startAngle: 220,
					endAngle: -40,
					axisLine: {
						show: true,
						lineStyle: {
							width: 1,
							color: [
								[1, 'rgba(0,0,0,0)']
							]
						}
					}, //仪表盘轴线
					axisLabel: {
						show: true,
						color: '#000',
						distance: 20,
						fontSize: 10
					}, //刻度标签。
					axisTick: {
						show: true,
						lineStyle: {
							color: '#000',
							width: 0.1
						},
						length: -10
					}, //刻度样式
					splitLine: {
						show: true,
						length: -20,
						lineStyle: {
							width: 0.5,
							color: '#000'
						}
					}, //分隔线样式
					detail: {
						show: false
					},
					pointer: {
						show: false
					}
				},
				{

					type: 'gauge',
					radius: '70%',
					center: ['50%', '50%'],

					splitNumber: 0, //刻度数量
					startAngle: 220,
					endAngle: -40,
					axisLine: {
						show: true,
						lineStyle: {
							width: 10,
							color: [
								[
									rhs, new echarts.graphic.LinearGradient(
										0, 0, 1, 0, [{
												offset: 0,
												color: '#ae3df6'
											},
											{
												offset: 1,
												color: '#53bef9'
											}
										]
									)
								],
								[
									1, '#222e7d'
								]
							]
						}
					},
					//分隔线样式。
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: false
					},
					axisTick: {
						show: false
					},
					pointer: {
						show: false
					},
					title: {
						show: true,
						offsetCenter: [0, '-20%'], // x, y，单位px
						textStyle: {
							color: '#000',
							fontSize: 20
						}
					},
					//仪表盘详情，用于显示数据。
					detail: {
						show: true,
						offsetCenter: [0, 10],
						color: '#000',
						formatter: function(params) {
							return params
						},
						textStyle: {
							fontSize: 15
						}
					},
					data: [{
						name: "日活跃",
						value: rc
					}]
				}
			]
		};

		echarts.init(document.getElementById("user_ri")).setOption(option, true);
	}

	//月活
	function userMon(yhs, yc) {
		option = {
			//   backgroundColor: "#062a44",
			series: [{
					name: '刻度',
					type: 'gauge',
					radius: '80%',
					min: 0,
					max: 100,
					splitNumber: 10, //刻度数量
					startAngle: 220,
					endAngle: -40,
					axisLine: {
						show: true,
						lineStyle: {
							width: 1,
							color: [
								[1, 'rgba(0,0,0,0)']
							]
						}
					}, //仪表盘轴线
					axisLabel: {
						show: true,
						color: '#000',
						distance: 20,
						fontSize: 10
					}, //刻度标签。
					axisTick: {
						show: true,
						lineStyle: {
							color: '#000',
							width: 0.1
						},
						length: -10
					}, //刻度样式
					splitLine: {
						show: true,
						length: -20,
						lineStyle: {
							width: 0.5,
							color: '#000'
						}
					}, //分隔线样式
					detail: {
						show: false
					},
					pointer: {
						show: false
					}
				},
				{
					type: 'gauge',
					radius: '70%',
					center: ['50%', '50%'],

					splitNumber: 0, //刻度数量
					startAngle: 220,
					endAngle: -40,
					axisLine: {
						show: true,
						lineStyle: {
							width: 10,
							color: [
								[
									yhs, new echarts.graphic.LinearGradient(
										0, 0, 1, 0, [{
												offset: 0,
												color: '#ae3df6'
											},
											{
												offset: 1,
												color: '#53bef9'
											}
										]
									)
								],
								[
									1, '#222e7d'
								]
							]
						}
					},
					//分隔线样式。
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: false
					},
					axisTick: {
						show: false
					},
					pointer: {
						show: false
					},
					title: {
						show: true,
						offsetCenter: [0, '-20%'], // x, y，单位px
						textStyle: {
							color: '#000',
							fontSize: 20
						}
					},
					//仪表盘详情，用于显示数据。
					detail: {
						show: true,
						offsetCenter: [0, 10],
						color: '#000',
						formatter: function(params) {
							return params
						},
						textStyle: {
							fontSize: 15
						}
					},
					data: [{
						name: "月活跃",
						value: yc
					}]
				}
			]
		};

		echarts.init(document.getElementById("user_yue")).setOption(option, true);
	}

	//用户测试
	function userct(userzfs, usersms, useryds) {

		option = {
			title: {
				text: '用户数据统计（月）',
				show: false
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985'
					}
				}
			},
			legend: {
				data: ['一键测试', '睡眠', '运动']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: dataTemp
			}],
			yAxis: [{
				type: 'value',

			}],
			series: [{
					name: '一键测试',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {}
					},
					data: userzfs
				},
				{
					name: '睡眠',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {}
					},
					data: usersms
				},
				{
					name: '运动',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {}
					},
					data: useryds
				}
			]
		};

		echarts.init(document.getElementById("user_tj")).setOption(option, true);
	}
	//userage()

	//25下    25-30   30-**  **-** **-45 45-50 50-55 55-60 60-65 65-** **-** **-80 80以上
	function userage(uList) {
		var xData = ['25岁及以下', '25-30岁', '30-35岁', '35-40岁', '40-45岁', '45-50岁', '50-55岁', '55-60岁', '60-65岁', '65-70岁', '70-75岁', '75-80岁', '80岁及以上']
		option = {
			grid: {
				left: 80,
				right: 10,
				bottom: 20,
				top: 10
			},
			tooltip: {
				trigger: 'item',
			},
			xAxis: {
				type: 'value',
				axisTick: {
					show: false
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#32346c',
					}
				},
				splitLine: {
					show: false,
					lineStyle: {
						color: '#32346c ',
					}
				},
				axisLabel: {
					textStyle: {
						color: '#bac0c0',
						fontWeight: 'normal',
						fontSize: '12',
					},
				},
			},
			yAxis: {
				type: 'category',
				offset: 10,
				axisLine: {
					lineStyle: {
						color: '#32346c'
					}
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				splitArea: {
					show: false
				},
				axisLabel: {
					inside: false,
					textStyle: {
						color: '#bac0c0',
						fontWeight: 'normal',
						fontSize: '12',
					},
				},
				data: xData
			},
			series: [{
				name: '人数',
				type: 'bar',
				itemStyle: {
					normal: {
						show: true,
						color: '#0BB88B',
						barBorderRadius: 50,
						borderWidth: 0,
						borderColor: '#333',
					}
				},
				barGap: '0%',
				barCategoryGap: '80%',
				data: uList
			}]
		};
		echarts.init(document.getElementById("agefb")).setOption(option, true);
	}

	function usersex(nr, nv, wz) {
		option = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				//			orient: 'vertical',
				//			left: 'left',
				data: ['男', '女', '未填写']
			},
			series: [{
				name: '用户性别',
				type: 'pie',
				radius: '60%',
				center: ['50%', '50%'],
				data: [{
						value: nr,
						name: '男'
					},
					{
						value: nv,
						name: '女'
					},
					{
						value: wz,
						name: '未填写'
					},

				],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 1)'
					}
				}
			}]
		};
		echarts.init(document.getElementById("sexfb")).setOption(option, true);
	}

	function useryqs(d) {

		var datas = d;
		option = {
			// backgroundColor: '#1b1b1b',
			title: {
				text: '',
				textStyle: {
					fontWeight: 'normal',
					fontSize: 12,
					color: '#F1F1F3'
				},
				left: '6%'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					lineStyle: {
						color: '#57617B'
					}
				},
				formatter: "{b}:{c}人"
			},
			grid: {
				y: 20,
				x2: 10,
				y2: 30,
				x: 36,
				//				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				axisLine: {
					lineStyle: {
						color: '#57617B'
					}
				},
				data: yfn,
				axisLabel: {
					textStyle: {
						fontSize: 12
					}
				},
			}],
			yAxis: [{
				type: 'value',
				interval: 200,
				axisTick: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#57617B'
					}
				},
				axisLabel: {
					textStyle: {
						fontSize: 12
					}
				},
				splitLine: {
					lineStyle: {
						color: '#a6a6a6'
					}
				}
			}],
			series: [{
				type: 'line',
				smooth: true,
				lineStyle: {
					normal: {
						width: 2
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(82, 191, 255, 0.3)'
						}, {
							offset: 0.8,
							color: 'rgba(82, 191, 255, 0)'
						}], false),
						shadowColor: 'rgba(228, 139, 76, 0.1)',
						shadowBlur: 10
					}
				},
				symbolSize: 4,
				itemStyle: {
					normal: {
						color: 'rgb(82, 191, 255)',
						borderColor: '#e48b4c'
					},
				},
				data: datas,
			}]
		};
		echarts.init(document.getElementById("yzcqs")).setOption(option, true);
	}

	function userrqs(d) {

		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					lineStyle: {
						color: '#57617B'
					}
				}
			},
			grid: {
				y: 20,
				x2: 5,
				y2: 30,
				x: 36,
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: dataTemp
			}],
			yAxis: [{
				type: 'value',
				axisLine: {
					lineStyle: {
						color: '#57617B'
					}
				},
				axisLabel: {
					textStyle: {
						fontSize: 12
					}
				},
				splitLine: {
					lineStyle: {
						color: '#a6a6a6'
					}
				}
			}],
			series: [{
				name: '活跃人数',
				type: 'line',
				smooth: true,
				//				symbol: 'circle',
				symbolSize: 5,
				showSymbol: true,
				lineStyle: {
					normal: {
						width: 2
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(82, 191, 255, 0.3)'
						}, {
							offset: 0.8,
							color: 'rgba(82, 191, 255, 0)'
						}], false),
						shadowColor: 'rgba(228, 139, 76, 0.1)',
						shadowBlur: 10
					}
				},
				symbolSize: 4,
				itemStyle: {
					normal: {
						color: 'rgb(82, 191, 255)',
						borderColor: '#e48b4c'
					},
				},
				data: d
			}]
		};

		echarts.init(document.getElementById("rhyqs")).setOption(option, true);
	}

	function userSjdt(data) {
		var max = 480,
			min = 100; // todo 
		var maxSize4Pin = 30,
			minSize4Pin = 10;
		option = {
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					return params.name + ' : ' + params.value[2];
				}
			},
			geo: {
				map: 'world',
				label: {
					emphasis: {
						show: false
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#ffffff',
						borderColor: '#111'
					},
					emphasis: {
						areaColor: '#61DECE'
					}
				}
			},
			grid: [{
				show: true,
				left: 0,
				right: 0,
				top: 0,
				height: 28,
				borderColor: 'transparent',
				backgroundColor: '#fff',
				z: 10
			}],
			series: [{
				name: 'Prices and Earnings 2012',
				type: 'scatter',
				coordinateSystem: 'geo',
				symbolSize: function(val) {
					var a = (maxSize4Pin - minSize4Pin) / (max - min);
					var b = minSize4Pin - a * min;
					b = maxSize4Pin - a * max;
					return a * val[2] + b;
				},
				data: data,
				activeOpacity: 1,
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				//					symbolSize: 10,
				symbolSize: function(val) {
					var a = (maxSize4Pin - minSize4Pin) / (max - min);
					var b = minSize4Pin - a * min;
					b = maxSize4Pin - a * max;
					return a * val[2] + b;
				},
				itemStyle: {
					normal: {
						color: '#08CCA7',
						shadowColor: '#333'
					}
				}
			}]
		};
		echarts.init(document.getElementById("sjdt")).setOption(option, true);
	}
</script>